<template>
    <div class="flex_col card m5 p10">
        <label class="flex_center_self">货架电机控制</label>
        <div class="flex_row_center mt10">
            <label>位置:</label>
            <el-input v-model="ctx.position" class="ml5" clearable style="width: 100px;" />
            <el-button class="ml5" @click="onClickCtrl" type="primary">控制</el-button>
        </div>
        <div class="flex_row_center mt5">
            <label>行:</label>
            <el-select style="width: 100px;" v-model="ctx.row">
                <el-option
                    v-for="(item, index) in ROWS"
                    :key="index"
                    :label="item"
                    :value="item"
                    />
            </el-select>
            <el-button @click="onClickRowScanCtrl" type="success" class="ml5">扫码位置</el-button>
            <el-button @click="onClickRowPickCtrl" type="warning" class="ml5">取货位置</el-button>
        </div>
        
    </div>
</template>

<script lang="ts" setup>
import { cargoCtrl, comprReset } from '@/service/devices/cargo';
import { cargo_pick_position_with_row, cargo_scan_position_with_row } from '@/utils/config';
import { runAction } from '@/utils/ui';
import { reactive } from 'vue';


interface Props {
    index: number,
}

const props = defineProps<Props>();
const ROWS = [
    1, 2, 3, 4, 5,
    6, 7, 8, 9, 10,
    11, 12, 13, 14, 15,
    16, 17, 18, 19, 20,
    21, 22, 23, 24, 25,
];

interface Ctx {
    position: string,
    row: number,
}

const ctx = reactive<Ctx>({
    position: '0',
    row: 1,
});

async function onClickRowPickCtrl() {
    await runAction('控制取货', `转到第${ctx.row}行`, async () => {
        const position = cargo_pick_position_with_row(ctx.row);
        await comprReset(props.index);
        await cargoCtrl({
            index: props.index,
            position
        })
    });
}

async function onClickRowScanCtrl() {
    await runAction('控制扫码', `转到第${ctx.row}行`, async () => {
        const position = cargo_scan_position_with_row(ctx.row);
        await comprReset(props.index);
        await cargoCtrl({
            index: props.index,
            position
        })
    });
}

async function onClickCtrl() {
    await runAction('控制', '', async () => {
        const position = parseInt(ctx.position);
        if (isNaN(position)) {
            throw '请输入位置';
        }
        await comprReset(props.index);

        await cargoCtrl({
            index: props.index,
            position
        });
    });
}

</script>


